<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
     <style>
        .box{
            height: 200px;
            width: 400px;
            position: relative;
         }

       .isWin{
           background-color: salmon;
           height: 200px;
           width: 400px;
           text-align: center;
           line-height: 200px;
           font-size: 30px;
       }
       .canvas{
           position: absolute;
           top: 0;
           left: 0;
       }
       

     </style>
</head>
<body>
   
    <div class="box">
        <div class="isWin"> 一等奖 </div>
        <canvas class="canvas" id="canvas" height="200" width="400"></canvas>
    </div>

   <script>
       // 作图
       let cvs = document.querySelector("#canvas");
       let isWin = document.querySelector(".isWin");
       let cvsCtx = cvs.getContext("2d");
       console.log(cvsCtx);

       // 画底层矩形
       cvsCtx.beginPath();
       cvsCtx.rect(0, 0, 400, 200);
       cvsCtx.fillStyle = "gray";
       cvsCtx.fill();
       cvsCtx.closePath();

       let isDraw = false


      cvs.onmousedown = function(e){
          isDraw = true
      }

      cvs.onmousemove = function(e){
         if(isDraw === false) return
     
         let x = e.offsetX
         let y = e.offsetY
         cvsCtx.beginPath();
         cvsCtx.globalCompositeOperation="destination-out";
         cvsCtx.arc(x, y, 20, 0, 2*Math.PI);
         cvsCtx.fillStyle = "red";
         cvsCtx.fill()
         cvsCtx.closePath();      
      }


      cvs.onmouseup = function(e){
          isDraw = false
      }
      


    let k = Math.random();
    console.log(k)
    if(k < 0.1){
        isWin.innerHTML = "一等奖"
    }else if(k < 0.3){
        isWin.innerHTML = "二等奖"
    }else if(k < 0.6){
        isWin.innerHTML = "三等奖"
    }else{
        isWin.innerHTML = "谢谢惠顾"
    }




   </script> 
 
</body>
</html>